<template>
  <view>
    <view class="title">配送至</view>
    <view class="shipment">
      <radio-group @change="select">
          <view class="item" v-for="item in address" :key="item.id">
              <view class="left">
                <view class="user">{{item.receiver}}</view>
                <view class="address">{{item.address}}</view>
              </view>
              <radio
              :value="item.address"
              />
          </view> 
      </radio-group>
    </view>
    <view class="footer">
      <button class="button primary" @click="submit">确定</button>
    </view>
    <view class="closeBtn" @click="$emit('close')">
        <u-icon name="close" size="24"></u-icon>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    address: {
      type: Array,
      default: () => []
    }
  },
  name: '',
  data() {
    return {
      addressList: [
        {
          id: 0,
          receiver: '张三',
          address: '湖北省武汉市黄陂区'
        },
        {
          id: 1,
          receiver: '李四',
          address: '湖北省黄冈市'
        },
        {
          id: 2,
          receiver: '王五',
          address: '湖北省武汉市汉阳区'
        },
      ],
      checkedAddress: ''
    }
  },
  onLoad(options) {},
  methods: {
   select(e){
     this.checkedAddress = e.detail.value
   },
   submit(){
     this.$emit('changeAddress',this.checkedAddress)
     this.$emit('close')
   }
  },
}
</script>

<style lang="scss">
  .title{
    line-height: 1;
    padding: 40rpx 0;
    text-align: center;
    font-size: 32rpx;
    font-weight: normal;
    border-bottom: 1rpx solid #ddd;
    color: #444;
    }
    .shipment{
      min-height: 300rpx;
      max-height: 540rpx;
      overflow: auto;
      padding: 20rpx 10rpx !important;
      .item{
        display: flex;
        justify-content: space-between;
        padding: 30rpx 50rpx 30rpx 60rpx;
        background-size: 40rpx;
        background-repeat: no-repeat;
        background-position: 0 center;
        position: relative;
        background-image: url(https://static.botue.com/erabbit/static/images/locate.png);
    
        .left{
          .user{
            font-size: 28rpx;
            color: #444;
            font-weight: 500;
          }
          .address{
            font-size: 26rpx;
            color: #666;
          }
        }
      }
    }
    .footer{
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0 40rpx;
      font-size: 28rpx;
      color: #444;
      .button{
        flex: 1;
        height: 72rpx;
        text-align: center;
        line-height: 72rpx;
        margin: 0 20rpx;
        color: #fff;
        border-radius: 72rpx;
      }
      .primary{
        color: #fff;
        background-color: #27ba9b;
      }
      }
      .closeBtn{
  position: absolute;top: 20px;
  right: 30rpx;
}
</style>